<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas抽獎</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
            box-sizing: border-box;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .time-graph {
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            align-items: center;
        }

    </style>
</head>

<body>
<div class="time-graph">
    <canvas id="time" width="800" height="800"></canvas>
</div>
<script type="text/javascript">
 "use strict";function clock(){ctx.clearRect(0,0,800,800),drawCircle(),drawKedu(),drawText(),drawPointer()}function drawCircle(){ctx.save(),ctx.fillStyle="#ece8e5",ctx.beginPath(),ctx.arc(0,0,raduis,0,2*Math.PI),ctx.fill(),ctx.closePath(),ctx.fillStyle="#e1e3ef",ctx.strokeStyle="rgba(141,141,141,.4)",ctx.lineWidth=4,ctx.beginPath(),ctx.arc(0,0,raduis-40,0,2*Math.PI),ctx.stroke(),ctx.fill(),ctx.closePath(),ctx.beginPath(),ctx.arc(0,0,raduis-45,0,2*Math.PI),ctx.stroke(),ctx.fill(),ctx.closePath(),ctx.beginPath();var t=ctx.createRadialGradient(0,0,0,0,0,raduis-40);t.addColorStop(.85,"transparent"),t.addColorStop(1,"rgba(0,0,0,.2)"),ctx.arc(0,0,raduis-40,0,2*Math.PI),ctx.fillStyle=t,ctx.fill(),ctx.closePath(),ctx.restore()}function drawKedu(){ctx.save(),ctx.rotate(-Math.PI/2),ctx.fillStyle="#000",ctx.strokeStyle="#000";for(var t=-Math.PI/360,c=0;c<60;c++)ctx.beginPath(),c%5==0?(ctx.lineWidth=24,ctx.arc(0,0,raduis-80,t,t+Math.PI/180)):(ctx.lineWidth=14,ctx.arc(0,0,raduis-80,t,t+Math.PI/720)),ctx.stroke(),ctx.closePath(),t+=6*Math.PI/180;ctx.restore()}function drawText(){ctx.save(),ctx.font="60px Arial",ctx.textAlign="center",ctx.textBaseline="middle";for(var t=1;t<=12;t++){var c=30*t*Math.PI/180;ctx.fillText(t,(raduis-130)*Math.cos(-Math.PI/2+c),(raduis-130)*Math.sin(-Math.PI/2+c))}ctx.restore()}function drawPointer(){var t=new Date,c=t.getHours();c>12&&(c-=12);var a=t.getMinutes(),e=t.getSeconds();console.log(e);ctx.save(),ctx.beginPath(),ctx.fillStyle="#54432f",ctx.arc(0,0,15,0,2*Math.PI),ctx.fill(),ctx.closePath(),ctx.fillStyle="#000",ctx.beginPath(),ctx.rotate(30*c*Math.PI/180+.5*a*Math.PI/180),ctx.rect(7,30,-18,-200),ctx.fill(),ctx.closePath(),ctx.beginPath(),ctx.rotate(30*-c*Math.PI/180-.5*a*Math.PI/180),ctx.rotate(6*a*Math.PI/180+.1*e*Math.PI/180),ctx.rect(7,30,-18,-300),ctx.fill(),ctx.closePath(),ctx.beginPath(),ctx.fillStyle="#b40000",ctx.rotate(6*-a*Math.PI/180-.1*e*Math.PI/180),ctx.rotate(6*e*Math.PI/180),ctx.rect(3,30,-6,-340),ctx.fill(),ctx.closePath(),ctx.beginPath(),ctx.fillStyle="#54432f",ctx.arc(0,0,8,0,2*Math.PI),ctx.fill(),ctx.closePath(),ctx.restore()}var c=document.getElementById("time"),ctx=c.getContext("2d"),raduis=400;ctx.translate(raduis,raduis),clock(),setInterval(clock,1e3);
</script>
</body>

</html>